<!--
 * @Autor: 王琛
 * @Description: 建筑信息管理
 * @Copyright: 智优科技版权所有
-->
<style lang = "stylus" scoped>
#headerInfo {
  icon_width = 35px;
  width: 100%;
  height: 100%;
  position: relative;
  padding:0 12px;
  box-sizing:border-box;
  display:grid;
  grid:100%/icon_width "calc(100% - %s)" % icon_width;
  place-content:center center;
  &>div{
    width:100%;
    height:100%;
  }
  .returnBtn{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rightContent{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &>img{
      height:45%;
    }
  }
}
.headerInfo{
  grid:100%/100% !important;
}
</style>

<template>
  <div id = "headerInfo" :class="{ headerInfo:!routeMeatInfo.backButton }">
    <!-- 返回按钮 -->
    <div class="returnBtn" v-if="routeMeatInfo.backButton" @click="$router.go(-1)">
      <!-- 来自文档中代码段，可用 -->
      <el-icon :size="25" color="#000"><ArrowLeft /></el-icon>
    </div>
    <!-- 右侧内容 -->
    <div class="rightContent">
      <!-- 页面logo -->
      <img v-if="routeMeatInfo.imgUrl" :src="routeMeatInfo.imgUrl"/>
      <!-- 内容 -->
      <sapn v-if="routeMeatInfo.title">{{ routeMeatInfo.title }}</sapn>
    </div>
  </div>

</template>

<script setup lang = "ts">
import {reactive} from 'vue';
const { routeMeatInfo } = defineProps({
  routeMeatInfo:{
    type:Object,
    default:()=>{
      return{}
    }
  }
})
console.log('%c王琛-113022','color:#fff;background:#ee6f57;padding:3px;border-radius:2px',routeMeatInfo);
</script>
